<template>
  <div class="swiper" style="display: flex; justify-content: space-between">
    <div class="swiper1">
      <swiper
        :slidesPerView="1"
        :navigation="true"
        :space-between="0"
        :loop="true"
        :modules="modules"
        @swiper="onSwiper"
        direction="vertical"
        class="mySwiper2"
      >
        <swiper-slide v-for="(item, index) in swiperData" :key="index" class="swiperItem">
          <div class="swiperImgBox">
            <img :src="$t(`messages.map.caseList[${index}].image`)" alt="" />
            <div class="imgSize">
              <div class="title2">{{ $t(`messages.map.caseList[${index}].title`) }}</div>
              <div class="size">
                {{ $t(`messages.map.caseList[${index}].detils`) }}
              </div>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <div class="swiper2">
      <swiper
        :slidesPerView="4"
        :navigation="true"
        :space-between="5"
        :modules="modules"
        :loop="true"
        :thumbs="{ swiper: swiperNew }"
        direction="vertical"
        class="mySwiper"
      >
        <swiper-slide v-for="(item, index) in swiperData" :key="index" class="swiperItem2">
          <div class="swiperImgBox2">
            <img :src="$t(`messages.map.caseList[${index}].image`)" alt="" />
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script setup>
import { toRaw, ref, reactive, onMounted } from 'vue'
import { buildSlideshow } from '@/http/api/store.js'
import Zh from '@/assets/i18n/langs/zh.js'
import En from '@/assets/i18n/langs/en.js'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/free-mode'
import 'swiper/scss/navigation'
import 'swiper/scss/pagination'
import { FreeMode, Navigation, Thumbs, Autoplay } from 'swiper/modules'

let modules = [FreeMode, Navigation, Thumbs, Autoplay]
//定义swiperNew,目的获取非响应式swiper
let swiperNew = ref(null)
const onSwiper = (swiper) => {
  // console.log(swiper);

  swiperNew.value = swiper //拿到swiper对象再转换为非响应式
}
let pageData = reactive({
  page: 1,
  size: 50
})
let swiperData = ref([])
const getData = async () => {
  let res = await buildSlideshow(pageData)
  Zh.messages.map.caseList = res.res.map((item) => {
    return {
      title: item.titleZh,
      detils: item.detilsZh,
      image: item.imageZh
    }
  })
  En.messages.map.caseList = res.res.map((item) => {
    return {
      title: item.titleEn,
      detils: item.detilsEn,
      image: item.imageEn
    }
  })

  swiperData.value = res.res
}
onMounted(() => {
  getData()
})
</script>
<style lang="scss" scoped>
.swiper2 {
  margin-top: 30px;
  height: 900px;
  margin-right: 45px;
  ::v-deep .swiper-slide {
    opacity: 0.5 !important;
  }
  ::v-deep .swiper-slide-active {
    opacity: 1 !important;
  }
}

.swiper {
  width: 100%;
  height: 100%;
  margin: 0;

  .swiperItem {
    height: 480px;
    width: 1400px;
    img {
      width: 400px;
      height: 260px;
    }
  }
  .swiperItem2 {
    width: 240px;
    height: 130px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.swiper1 {
  padding: 30px;
}
.swiperImgBox {
  width: 100%;
  height: 900px;
  position: relative;
  img {
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    z-index: -1;
  }
  .imgSize {
    position: absolute;
    right: 20px;
    top: 30px;
  }
}

::v-deep(.swiper-pagination-bullet) {
  //修改分页器圆点大小
  width: 8px;
  height: 8px;
  background-color: #fff;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
::v-deep(.swiper-pagination-horizontal.swiper-pagination-bullets) .swiper-pagination-bullet {
  // 分页器远点之间的距离
  margin: 0 10px;
}

::v-deep(.swiper-button-prev),
::v-deep(.swiper-button-next) {
  display: none;
}
.imgSize {
  height: 250px;
  .title {
    font-size: 38px;
    font-weight: bold;
    color: #ffdd00;
  }
  .size {
    width: 450px;
    color: #ffffff;
    white-space: pre-wrap; /* 保留空白符序列，但是当到达容器边界时进行换行 */
    overflow-wrap: break-word; /* 在长单词或URL地址内部进行换行 */
    word-break: break-all; /* 允许在任意字符间断开（用于CJK文字等） */
  }
}
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

